import React from 'react';
import {Alert, Button, ProgressBar, Carousel} from 'react-bootstrap';

import until from 'until/common.js';

import TestImg from 'publicImage/12345.png';

class AlertDismissable extends React.Component {
    constructor(props, context) {
      super(props, context);
  
      this.handleDismiss = this.handleDismiss.bind(this);
      this.handleShow = this.handleShow.bind(this);
  
      this.state = {
        show: true
      };
    }

    componentDidMount() {
        
    }
  
    handleDismiss() {
      this.setState({ show: false });
    }
  
    handleShow() {
      this.setState({ show: true });
    }
  
    render() {
      if (this.state.show) {
        return (
            <div>
                <Alert bsStyle="danger" onDismiss={this.handleDismiss}>
                    <h4>Oh snap! You got an error!</h4>
                    <p>
                        Change this and that and try again. Duis mollis, est non commodo
                        luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                        Cras mattis consectetur purus sit amet fermentum.
                    </p>
                    <p>
                        <Button bsStyle="danger">Take this action</Button>
                        <span> or </span>
                        <Button onClick={this.handleDismiss}>Hide Alert</Button>
                    </p>
                </Alert>
                <div>
                    <ProgressBar active now={85} />
                </div>
                <img 
                    width='100%'
                    height={100} 
                    alt="900x500" 
                    src={require('publicImage/webpack.svg')}
                    // src='../../../assast/images/webpack.svg'
                />
                <div className="scroll-wrapper">
                    <Carousel>
                        <Carousel.Item>
                            <img 
                                style={{
                                    height: '340px',
                                    width: '100%'
                                }} 
                                src={require('publicImage/carousel.png')} 
                            />
                            <Carousel.Caption>
                                <h3>First slide label</h3>
                                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                            </Carousel.Caption>
                        </Carousel.Item>
                        <Carousel.Item>
                            <img 
                                style={{
                                    height: '340px',
                                    width: '100%'
                                }}
                                src={require('publicImage/carousel.png')} 
                            />
                            <Carousel.Caption>
                                <h3>Second slide label</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </Carousel.Caption>
                        </Carousel.Item>
                        <Carousel.Item>
                            <img 
                                src={TestImg}
                                style={{
                                    height: '340px',
                                    width: '100%'
                                }}
                            />
                            <Carousel.Caption>
                                <h3>Third slide label</h3>
                                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                            </Carousel.Caption>
                        </Carousel.Item>
                    </Carousel>
                </div>
            </div>
        );
      }
  
      return <Button onClick={this.handleShow}>Show Alert</Button>;
    }
}

export default AlertDismissable;